import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import { Button, List, InputItem, WhiteSpace, Radio } from 'antd-mobile'
import Logo from '../../component/logo'
import { actionCreator } from '../../store/user'

import '../../index.css'

class Register extends Component {
  constructor(props) {
    super(props)
    this.state = {
      type: 'genius',//组件内部属性，可以不用redux,type:boss
      user: '',
      pwd: '',
      repeatPwd: ''
    }
  }
  handleChange(key, value) {
    this.setState({
      [key]: value
    })
  }
  handleClick() {
    this.props.register(this.state)
  }
  render() {
    const RadioItem = Radio.RadioItem,
      { msg, redirectTo } = this.props
    return (
      <div>
        {redirectTo && redirectTo!=='/login' ? <Redirect to={redirectTo}></Redirect> : null}
        <Logo></Logo>
        <span className="error-msg">{msg}</span>
        <List>
          <InputItem
            onChange={v => { this.handleChange('user', v) }}
          >用户名</InputItem>
          <InputItem
            type='password'
            onChange={v => { this.handleChange('pwd', v) }}
          >密码</InputItem>
          <InputItem
            type='password'
            onChange={v => { this.handleChange('repeatPwd', v) }}
          >确认密码</InputItem>
          <RadioItem
            checked={this.state.type === 'genius'}
            onChange={v => { this.handleChange('type', 'genius') }}
          >
            牛人
          </RadioItem>
          <RadioItem
            checked={this.state.type === 'boss'}
            onChange={v => { this.handleChange('type', 'boss') }}
          >
            老板
          </RadioItem>
          <WhiteSpace></WhiteSpace>
          <Button
            type='primary'
            onClick={() => { this.handleClick() }}
          >注册</Button>
        </List>
      </div>
    )
  }
}
const mapState = (state) => ({
  msg: state.user.msg,
  redirectTo: state.user.redirectTo
})
const mapDispatch = (dispatch) => ({
  register(data) {
    dispatch(actionCreator.register(data))
  }
})
export default connect(mapState, mapDispatch)(Register)